<template>
  <div id="app">
    <input type="" v-model="address">
    <button @click="getLocation">查询街道</button>
    <div>{{ result1 }}</div>
     <div>{{ result2 }}</div>
  </div>
</template>

<script>
import request from '../src/utils/request'
export default {
  name: 'App',
  components: {},
  data() {
    return {
      address: '',
      addressData: {},
      latlng: '',
      result1: '',
      result2: ''
    }
  },
  methods: {
    async getLocation() {
      await request({
        url:'geo',
        method: 'get',
        params: {
          address: this.address,
          output: 'JSON',
          key: '4e0c94ad74011811ac71fcaed13f9e09'
        }
      })
      .then(res => this.addressData = res.data)
      console.log(this.addressData);
      this.latlng = this.addressData.geocodes[0].location
      console.log(this.latlng);

      await request({
        url: 'regeo',
        method: 'get',
        params: {
          output: 'JSON',
          location: this.latlng,
          key: '4e0c94ad74011811ac71fcaed13f9e09',
          radius: 1000,
          extensions: 'all'
        }
      })
      // .then(res => this.result = res.data.regeocode.addressComponent.township)
  .then(res => (this.result1 = res.data.regeocode.addressComponent.district,
        this.result2 = res.data.regeocode.addressComponent.township))
      console.log(this.result1,this.result2);


    }
  }
}
</script>

<style>
</style>
